<template>
	<view class="">
		<view class="comment-box" v-for="(item,index) in commentList" :key='index'>
			<view class="comment_header">
				<u-avatar :src="item.user.avatar" size="40"></u-avatar>
				<view class="ch_name">
					<text>{{item.user.username}}</text>
					<view class="ch_time">
						{{item.create_time}}
					</view>
				</view>
			</view>
			<view class="comment-content">
				{{item.content}}
			</view>
			<u-divider></u-divider>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["nid"],
		watch: {
			nid: function(indexVal, oldVal) {
				this.showComment(indexVal)
			},
			$route(to,from){
				this.showComment(this.nid)
			}
		},
		data() {
			return {
				commentList: [{
					content: '',
					create_time: '',
					user: {
						username: '',
						avatar: '',
					}
				}],
			}
		},
		methods: {
			showComment(id) {
				uni.request({
					url: 'http://localhost:8081/comment/getAll?note_id=' + id,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						res.data.map((item) => {
							item["create_time"] = item.create_time.slice(0, 19);
							return item;
						});
						this.commentList = res.data

					}
				});
			},
		},
	}
</script>

<style lang="scss">
	.comment_header {
		display: flex;
		align-items: center;

		.ch_name {
			margin-left: 20rpx;

			.ch_time {
				font-size: 28rpx;
				color: #ADADAD;
			}
		}
	}

	.comment-content {
		margin-left: 80rpx;
	}
</style>
